<script setup>
   import { ref,onMounted, Static } from "vue"
   import { useShowNum } from "@/composables/shownum.js"
   useShowNum()
   
   let wh = ref(0)
   let active = ref(0)
   let scrollTop = ref(0)
   
   //改变分类
   function activeChanged(i){
     active.value = i
     scrollTop = scrollTop ? 0 : 1    //scroll-top属性如果一样就不会变化，所以要0和1来回切换
     cateList2.value = cateList.value[i].children
   }
   
   let cateList = ref([])        //一级分类
   let cateList2 = ref([])       //二级分类
   async function getCateList(){
      const { data:res } = await uni.$http.get('/api/public/v1/categories')
      if(res.meta.status != 200) return uni.$showMsg()
      cateList.value = res.message
      cateList2.value = res.message[0].children
   }   
   
   function gotoGoodsList(cid){
     uni.navigateTo({
       url : `/subpkg/goods_list/goods_list?cid=${cid}`
     })
   }
   
   
   //搜索
   function gotoSearch(){
     uni.navigateTo({
       url: "/subpkg/search/search"
     })
   }
    
   onMounted( ()=> {
      wh = uni.getSystemInfoSync().windowHeight;
      getCateList();
   })
   

</script>


<template>
   <!-- 搜索框 -->
  <my-search @click="gotoSearch"></my-search>
  
  <view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="`height:${wh}px`">
        
        <block v-for="(item,i) in cateList" :key="i">
            <view :class="`left-scroll-view-item ${i === active ? 'active' : ''}`" @click="activeChanged(i)">{{item.cat_name}}</view>
        </block>
        
      </scroll-view>
      
      <!-- 右侧的滚动视图区域 -->
        <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
          
          <view class="cate-lv2" v-for="(item2, i2) in cateList2" :key="i2">
              <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
              <!-- 三级分类 -->
              <view class="cate-lv3-list">
                <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3.cat_id)">
                  <image :src="item3.cat_icon"></image>
                  <text>{{item3.cat_name}}</text>
                </view>
              </view>
          </view>
          
        </scroll-view>
      
    </view>
  </view>
</template>


<style lang="scss">

.scroll-view-container{
  display: flex;
  
    .left-scroll-view{
       width: 240rpx;
      
      .left-scroll-view-item{
         line-height: 60px;
         background-color: #f7f7f7;
         text-align: center;
         font-size: 12px;
         //transition:backgrouund-color 2s ease-in;  小程序不支持css3动画
         
         &.active{
           background-color: #ffffff;
           position: relative;       //移动的时候，不会脱离标准流
           
           &::before{
             content: '';
             display: block;
             width: 6rpx;
             height: 100%;
             background-color: #c00000;
             position: absolute;
             left: 0;
           }
           
         }
      }
      
    }
  

  
   .cate-lv3-list {
     display: flex;
     flex-wrap: wrap;
   
     .cate-lv3-item {
       width: 33.33%;
       margin-bottom: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
   
       image {
         width: 60px;
         height: 60px;
       }
   
       text {
         font-size: 12px;
       }
     }
   }
  
  
}


</style>
